<template>
  <div class="order">
    <div class="timeState">
      <span class="time">2018-07-17 11:57</span>
      <span class="state">已完成</span>
    </div>
    <div class="details">
      <div class="drive">
        <div class="driveImg">
        </div>
        <div class="driveName">张师傅</div>
        <span class="carType">面包车</span>
        <span class="plateNum">陕A*****</span>
      </div>
      <div class="site"><span class="origin"></span>海洋大厦</div>
      <div class="site"><span></span>汉阳大厦</div>
    </div>
    <div class="expend">
      <span>花费：<span>￥60.00</span></span>
      <span class="evaluate" @click="orderScore">去评价</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'orderList',
    methods: {
      orderScore () {
        wx.navigateTo({
          url: '/pages/client-side/order/orderScore/main'
        })
      }
    }
  }
</script>

<style scoped>
  .order{
    width: 710rpx;
    height: 360rpx;
    border: 2rpx solid #eeeeee;
    border-radius: 15rpx;
    margin: 18rpx auto 0 auto;
    box-shadow: 0rpx 5rpx 8rpx #eee;
    font-size: 28rpx;
  }
  .timeState{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1rpx solid #eee;
    padding: 20rpx 0 14rpx 0;
  }
  .state{
    color: #b9b9b9;
  }
  .details{
    width: 90%;
    margin: 0 auto;
    border-bottom: 1rpx solid #eee;
  }
  .drive{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 18rpx 0;
  }
  .driveImg{
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
    background:url("http://img.gek6.com/Fp_pee6R1zF0FSAJVNot8rmIojm1") no-repeat center/cover;
  }
  .driveName{
    margin: 0 10rpx;
  }
  .drive span{
    line-height: 36rpx;
    padding: 0 26rpx;
    border: 1rpx solid #16bf6e;
    border-radius: 60rpx;
    font-size: 20rpx;
    color: #16bf6e;
  }
  .carType{
    margin: 0 18rpx 0 44rpx ;
  }
  .site{
    font-size: 28rpx;
    padding: 5rpx 0 15rpx 20rpx;
  }
  .site span{
    width: 12rpx;
    height: 12rpx;
    border: 8rpx solid #ff3655;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15rpx;
  }
  .origin{
    border: 8rpx solid #12c26f !important;
  }
  .expend{
    width: 90%;
    padding: 0 40rpx;
    margin: 0 auto;
    line-height: 50rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .evaluate{
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 26rpx;
    border: 1rpx solid #16bf6e;
    border-radius: 60rpx;
    font-size: 24rpx;
    color: #16bf6e;
  }
</style>
